<template>
  <!-- 新建区域 -->
  <div class="NewArea">
    <!-- 页面头部和查询区域 -->
    <div class="NewArea-tittle">
      <div class="crumbs">
        <p>
          <span>车行管理 /</span> <span>区域管理 /</span> <span> 新建区域</span>
        </p>
        <h3>新建区域</h3>
      </div>
    </div>
    <div class="NewArea-content">
      <div class="content-title">
        <span>基础信息</span>
      </div>
      <div class="add">
        <el-form
          require-asterisk-position="right"
          :model="addData"
          :rules="rules"
        >
          <el-form-item prop="regionName" label="区域名称" required="true">
            <el-input
              clearable
              v-model="addData.regionName"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item prop="region.rid" label="区域编号" required="true">
            <!-- <el-input clearable v-model="addData.region.rid" placeholder="请输入" /> -->
            <el-select
              clearable
              v-model="addData.region.rid"
              placeholder="请选择"
            >
              <el-option
                :label="v.name"
                :value="v.rid"
                :key="v"
                v-for="v in areaData"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="area" label="区域面积" required="true">
            <el-input
              type="number"
              min="0"
              clearable
              v-model="addData.area"
              placeholder="请输入"
            />
            <div class="pos">㎡</div>
          </el-form-item>
          <el-form-item prop="carNum" label="车位数量" required="true">
            <el-input
              type="number"
              min="0"
              clearable
              v-model="addData.carNum"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="备注" style="margin-left: 30px">
            <el-input
              :rows="4"
              type="textarea"
              clearable
              v-model="addData.remark"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>

        <div style="padding-left: 75px">
          <el-button type="primary" @click="add">提交</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import http from "../../utils/http";
import { ElMessage } from "element-plus";
import router from "../../router";
import type { FormInstance, FormRules } from "element-plus";

interface aaa {
  rid: Number;
  name: String;
}

//区域数据
let areaData = ref<aaa[]>([]);

//新增数据
let addData = reactive({
  id: 0,
  regionName: "",
  region: {
    rid: "",
  },
  area: "",
  carNum: "",
  remark: "",
  communityId: 1,
});

//正则判断
const rules = reactive<FormRules>({
  regionName: [
    { required: true, message: "请输入区域名称", trigger: "blur" },
    { min: 2, max: 5, message: "长度在2-5位", trigger: "blur" },
  ],
  rid: [
    {
      required: true,
      message: "请选择区域编号",
      trigger: "blur",
    },
  ],
  area: [
    {
      required: true,
      message: "请输入面积",
      trigger: "blur",
    },
  ],
  carNum: [
    {
      required: true,
      message: "请输入车位数量",
      trigger: "blur",
    },
  ],
});

//提交
let add = () => {
  http({
    url: "/region/add",
    method: "POST",
    data: addData,
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      ElMessage({
        message: "新增成功",
        type: "success",
      });
      setTimeout(() => {
        router.push("/home/regionalManagement");
      }, 1500);
    } else {
      ElMessage.error("新增失败");
    }
  });
};

//返回
let back = () => {
  router.push("/home/regionalManagement");
};

onMounted(() => {
  console.log("挂载后");
  http({
    url: "/regiontype/list",
  }).then(({ data }) => {
    console.log(data);
    areaData.value = data.data;
  });
});
</script>

<style lang="less" scoped>
.NewArea {
  width: 70%;
  // height: 100%;
  margin: auto;
  .NewArea-tittle {
    margin-top: 20px;
    background-color: white;
    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      p {
        margin-bottom: 10px;
        span {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
  }
  .NewArea-content {
    padding: 15px 20px;
    margin-top: 20px;
    background-color: white;

    .content-title {
      width: 96%;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .add {
      width: 500px;
      margin: auto;
      .el-form-item {
        margin-bottom: 30px;
        position: relative;
        .pos {
          position: absolute;
          top: 0;
          right: 50px;
        }
      }
      .el-input,
      .el-textarea,
      .el-select {
        width: 350px;
      }
    }
  }
}
</style>
